<template>
  <scroll-view
    class="home-list"
    scroll-y
    @scrolltolower="scroll"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    @refresherrestore="onRestore"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :ower-threshold="0"
  >
    <view
      class="home-list-item"
      :class="'type-' + item.approveStatus"
      v-for="(item, index) in arr"
      :key="index"
    >
      <view class="item-dt" @click="itemClick(item)">
        <text class="name u-line-1">{{ item.deviceNo }}</text>
        <view class="view">
          <u-tag
            class="tag-item"
            :text="item2"
            size="mini"
            @click="itemClick(item)"
            borderColor="#cacaca"
            color="#cacaca"
            style="margin-right: 10rpx"
            plain
            v-for="item2 in item.installPositionNameList"
            :key="item2"
          ></u-tag>
        </view>
        <uni-icons type="right" size="14" color="#999" v-if="type == '1'" />
      </view>
      <template v-if="item.fifteenDaysWorkVoList && item.fifteenDaysWorkVoList.length > 0">
        <view
          class="item-box"
          @click.stop="itemClick2(item2)"
          v-for="(item2, index2) in item.fifteenDaysWorkVoList.length > 3
            ? item.showMore
              ? item.fifteenDaysWorkVoList
              : item.fifteenDaysWorkVoList.slice(0, 3)
            : item.fifteenDaysWorkVoList"
          :key="index2"
        >
          <view class="item-dd">
            <text class="label">工单号:</text>
            <text class="value u-line-1">{{ item2.workCode }}</text>
          </view>
          <view class="tag-box">
            <u-tag
              class="tag"
              :text="item2.state"
              @click="itemClick2(item2)"
              :borderColor="getColor(item2.state)"
              :bgColor="getColor(item2.state)"
              size="mini"
            ></u-tag>
            <uni-icons
              type="right"
              size="14"
              color="#999"
              v-if="type !== '1'"
            />
          </view>
        </view>
        <view
          class="more"
          v-if="item.fifteenDaysWorkVoList.length > 3"
          @click.stop="clickMore(index)"
        >
          <text>显示更多</text>
          <view class="icon" :style="{ top: item.showMore ? '10px' : '7px' }">
            <uni-icons
              style="top: 14rpx"
              :type="item.showMore ? 'top' : 'bottom'"
              size="14"
              color="#999"
            />
          </view>
        </view>
      </template>
      <template v-else>
        <Empty />
      </template>
    </view>
    <view class="loading animation-scale-up" v-if="loading"></view>
    <view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
  </scroll-view>
</template>

<script>
import { setPageData } from "@/store/user";
import Empty from "@/components/empty";
import { setToken, getToken, getUserInfo, getNotice } from "@/store/user.js";
export default {
  components: { Empty },
  props: {
    data: {
      type: Array,
      default: [],
    },
    scrollNoData: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "1", //1 块点击  2里面的内容行点击
    },
  },
  watch: {
    data: {
      handler: function (val, oldVal) {
        this.arr = val;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      loading: true,
      noData: false,
      arr: [],
      triggered: false,
    };
  },
  onReady: async function () {},
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  mounted() {},
  methods: {
    clickMore(index) {
      this.$set(this.arr, index, {
        ...this.arr[index],
        showMore: !this.arr[index].showMore,
      });
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    setLoading(val) {
      this.loading = val;
    },
    scroll(e) {
      const that = this;
      if (!that.noData) {
        this.loading = true;
        this.$emit("scrollBottom", (val) => {
          that.noData = val;
          setTimeout(() => {
            this.loading = false;
          }, 400);
        });
      }
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    itemClick(item) {
      if (this.type !== "1") return;
      setPageData(item);
      this.$emit("itemClick", item);
    },
    itemClick2(item) {
      if (this.type == "1") return;
      setPageData(item);
      this.$emit("itemClick", item);
    },
    qrCodeClick(data) {
      // this.$emit("qrCodeClick", item);
      setPageData(data);
      uni.navigateTo({
        url: "/pages/qrCode/index",
        animationType: "pop-in",
      });
    },
    ok(val) {
      this.$emit("ok", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-list {
  height: 100%;

  .home-list-item {
    padding-top: 16rpx;
    background-color: #fff;
    box-shadow: 0rpx 5rpx 13rpx 1rpx #e0e0e0;
    margin-bottom: 20rpx;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    min-height: 300rpx;

    .item-dt {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 27rpx;

      .name {
        font-size: 20px;
        min-width: 50%;
        flex: 1;
      }

      .view {
        color: #83b4ff;
        display: flex;
        align-items: center;
        overflow: auto;
        .tag-item {
          font-size: 14px;
        }
        .tag-item:last-child {
          margin-right: 0;
        }
      }
    }

    .item-box {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22rpx;
    }

    .item-dd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      flex: 1;
      margin-right: 20rpx;

      .label {
        margin-right: 10rpx;
        font-size: 28rpx;
        width: 100rpx;
        min-width: 100rpx;
      }

      .value {
        font-size: 28rpx;
        flex: 1;
        overflow: hidden;
      }

      .btn {
        width: 170rpx;
        min-width: 170rpx;
        margin-left: 29rpx;
        height: 60rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }

    .tag-box {
      display: flex;
      align-items: center;

      .tag {
        margin-right: 5rpx;
      }
    }
  }

  .progress {
    position: absolute;
    right: 10rpx;
    bottom: 56rpx;
    width: 30%;
  }

  .item-bottom {
    height: 64rpx;
    line-height: 64rpx;
    padding: 0 37rpx;
    background-color: #b8c6b7;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .img {
      width: 47rpx;
      height: 37rpx;
      margin-right: 24rpx;
    }
  }

  .scroll-no-data {
    text-align: center;
  }

  .more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
    color: #666;
  }
}
</style>
